<template>
  <div class="p-24">
    <div class="search-header">
      <el-form
        ref="queryParams"
        :model="queryParams"
        size="small"
        :inline="true"
      >
        <el-form-item prop="userName2">
          <WeChat
            :options="options"
            @getValue="getValue"
            inputWidth="220px"
            :placeholder="`全部企微号`"
          ></WeChat>
        </el-form-item>
        <el-form-item prop="userName2">
          <el-button size="small"
            ><svg-icon icon-class="iexport" /> 导出数据</el-button
          >
        </el-form-item>
        <el-form-item prop="day">
          <el-radio-group v-model="queryParams.day" @change="handleChangeDay">
            <el-radio-button
              v-for="(item, index) in days"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="day">
          <el-date-picker
            v-model="queryParams.times"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="企微号">
        <template slot-scope="scope">
          <div class="flex kh_box">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
              class="useravatar"
            />
            <div class="flex aligncenter pl-12 c_222333">
              {{ scope.row.title }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="拉群客户数	" />
      <el-table-column prop="friend_count" label="入群客户数	" />
      <el-table-column prop="source" label="入群比例" />
    </el-table>
  </div>
</template>
<script>
import WeChat from "@/views/components/WeChat";
import { getDateRang } from "@/utils/validate";
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: "小红",
          WeChatNum: 2,
          WeChatName: "智行",
        },
        {
          value: 2,
          label: "小军",
          WeChatNum: 1,
          WeChatName: "锐行",
        },
      ],
      days: [
        { label: "今天", value: 1 },
        { label: "昨天", value: 2 },
        { label: "近3天", value: 3 },
        { label: "近7天", value: 4 },
      ],
      queryParams: {
        times: "",
      },
      value: "",
      tableData: [{ id: 1, title: "xxx" }],
    };
  },
  components: {
    WeChat,
  },
  methods: {
    getValue(obj) {
      console.log("获取行", obj);
    },

    handleChangeDay(val) {
      let now = new Date();
      switch (val) {
        case 1:
          this.queryParams.times = [this.parseTime(now), this.parseTime(now)];
          break;
        case 2:
          this.queryParams.times = getDateRang("yesterday");
          break;
        case 3:
          this.queryParams.times = getDateRang("pastThree");
          break;
        case 4:
          this.queryParams.times = getDateRang("pastWeek");
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>